.x-side,
.@{popbox-prefix-cls} {
  .x-menu {
    min-width: 160px;
    outline: none;
    a {
      display: block;
      // padding: 7px 20px;
      text-decoration: none;
      transition: padding-left 0.2s;
      color: #666666;

      i,
      .fa {
        & + .ico-text {
          margin-left: 7px;
        }
      }
    }
    &-item:hover {
      a {
        // color: @primary-color;
        // padding-left: 24px;
      }
    }
    &-item-selected a {
      // color: @primary-color;
    }
  }
}
.x-side {
  background-color: #e4eaf4;
  // box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  overflow: auto;
  .x-menu {
    &-item,
    &-submenu-title {
      position: relative;
      padding: 0 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &-item > a,
    &-submenu-title {
      display: block;
      padding-top: 7px;
      padding-bottom: 7px;

      &:before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: transparent;
        content: "";
      }
      &:hover {
        color: @blue;
      }
    }
    &-submenu-title {
      cursor: pointer;
      .@{menu-prefix-cls}-submenu-arrow {
        position: absolute;
        top: 50%;
        right: 10px;
        z-index: 1;
        width: 10px;
        margin-top: -1px;
        transition: transform 0.3s @ease-in-out;

        &::before,
        &::after {
          position: absolute;
          width: 6px;
          height: 1.5px;
          background: rgba(0, 0, 0, 0.8);
          border-radius: 2px;
          transition: background 0.3s @ease-in-out, transform 0.3s @ease-in-out,
            top 0.3s @ease-in-out;
          content: '';
        }

        // &::before {
        //   transform: rotate(45deg) translateY(-2px);
        // }

        // &::after {
        //   transform: rotate(-45deg) translateY(2px);
        // }

        &::before {
          transform: rotate(-45deg) translateX(2px);
        }

        &::after {
          transform: rotate(45deg) translateX(-2px);
        }

        transition: all 0.3s;
      }
      &:hover {
        .@{menu-prefix-cls}-submenu-arrow {
          &::after,
          &::before {
            background: @blue;
          }
        }
      }
    }
    &-submenu-open {
      .@{menu-prefix-cls}-submenu-title {
        .@{menu-prefix-cls}-submenu-arrow {
          transform: translateY(-2px);
          &::after {
            transform: rotate(-45deg) translateX(-2px);
          }
          &::before {
            transform: rotate(45deg) translateX(2px);
          }
        }
      }
    }
    &-item-selected {
      background: @blue;
      > a {
        &, &:hover {
          color: #FFFFFF;
        }
      }
      &:after {
        content: ' ';
        position: absolute;
        right: 0;
        top: 50%;
        width: 0;
        height: 0;
        margin-top: -6px;
        border-top: 6px solid transparent;
        border-right: 6px solid #ffffff;
        border-bottom: 6px solid transparent;
      }
    }
    &-submenu-selected {
      > .@{menu-prefix-cls}-submenu-title {
        color: @blue;
        .@{menu-prefix-cls}-submenu-arrow {
          &::after,
          &::before {
            background: @blue;
          }
        }
      }
    }
  }
}
.x-nav {
  // padding: 12px 0;
  // .@{menu-prefix-cls} {
  //   &-hidden {
  //     display: none;
  //   }

  //   &-submenu-title,
  //   &-item {
  //     position: relative;
  //     padding: 0 !important;
  //     // border-bottom: 1px solid #223147;
  //     border-left: 2px solid transparent;
  //     // line-height: 40px;
  //     color: rgba(0, 0, 0, 0.8);
  //     // background-color: #344762;
  //     white-space: nowrap;
  //     cursor: pointer;

  //     em {
  //       overflow: hidden;
  //       display: inline-block;
  //       // width: 0;
  //       vertical-align: middle;
  //       transition: all 0.3s;
  //     }
  //   }
  //   &-submenu-title,
  //   &-item a {
  //     padding: 7px 12px !important;
  //   }

  //   &-item:hover {
  //     border-left-color: #ff7c35;
  //     a {
  //       color: #ff7c35;
  //     }
  //   }
  //   &-submenu-title:hover {
  //     border-color: #fff0db;
  //     border-left-color: #ff7c35;
  //     background-color: #fff7ed;
  //   }

  //   &-submenu-selected {
  //     .@{menu-prefix-cls}-submenu-title {
  //       border-color: #fff0db;
  //       border-left-color: #ff7c35;
  //       background-color: #fff7ed;

  //       // .@{menu-prefix-cls}-submenu-arrow {
  //       // 	&:before, &:after {
  //       // 		background: #ff7c35 !important;
  //       // 	}
  //       // }
  //     }
  //   }
  //   &-item-selected {
  //     border-left-color: #ff7c35;
  //     a {
  //       color: #ff7c35;
  //     }
  //   }

  //   &-submenu {
  //     &-title {
  //       padding-right: 24px !important;
  //     }

  //     .@{menu-prefix-cls}-item {
  //       font-size: 13px;
  //       padding-left: 24px !important;
  //       // background-color: #28374d;
  //       transition: all 0.3s;
  //     }
  //   }

  //   &-submenu {
  //     &-inline {
  //       > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
  //         position: absolute;
  //         top: 50%;
  //         right: 10px;
  //         z-index: 1;
  //         width: 10px;
  //         transition: transform 0.3s @ease-in-out;

  //         &::before,
  //         &::after {
  //           position: absolute;
  //           width: 6px;
  //           height: 1.5px;
  //           background: rgba(0, 0, 0, 0.8);
  //           border-radius: 2px;
  //           transition: background 0.3s @ease-in-out, transform 0.3s @ease-in-out,
  //             top 0.3s @ease-in-out;
  //           content: '';
  //         }

  //         &::before {
  //           transform: rotate(45deg) translateY(-2px);
  //         }

  //         &::after {
  //           transform: rotate(-45deg) translateY(2px);
  //         }

  //         transition: all 0.3s;
  //       }

  //       > .@{menu-prefix-cls}-submenu-title:hover .@{menu-prefix-cls}-submenu-arrow {
  //         &::after,
  //         &::before {
  //           background: #ff7c35;
  //         }
  //       }
  //     }

  //     &-inline > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
  //       &::before {
  //         transform: rotate(-45deg) translateX(2px);
  //       }

  //       &::after {
  //         transform: rotate(45deg) translateX(-2px);
  //       }
  //     }

  //     &-open {
  //       &.@{menu-prefix-cls}-submenu-inline
  //         > .@{menu-prefix-cls}-submenu-title
  //         .@{menu-prefix-cls}-submenu-arrow {
  //         transform: translateY(-2px);

  //         &::after {
  //           transform: rotate(-45deg) translateX(-2px);
  //         }

  //         &::before {
  //           transform: rotate(45deg) translateX(2px);
  //         }
  //       }
  //     }
  //   }
  // }
}

.@{dropdown-prefix-cls} {
  &-menu {
    min-width: 150px;
    border: 1px solid #eeece8;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.18) !important;
  }
}
